<template>
	<view>
		<view v-if='categories && categories.length > 0'>
			<u-tabs :list="categories" @click="chooseCategory"></u-tabs>
			<view v-if='children && children.length > 0' style='margin-top:20px'>
				<!--  -->
				<u-collapse>
					<u-collapse-item v-for='item in children' :title="item.__toString" name="Docs guide">
						<view v-if='item.contents && item.contents.length > 0' >
							<view>
								<!-- <view span="6" v-for="(content, index) in item.contents" :key="index"
									@click='toUrl(`/pages/content/video?id=${content.id}`)'>
									<view class="video-item">
										<video :src="content.cover" controls class="video-preview"
											:poster="content.video"></video>
										<img :src='content.video ? content.video : "/static/video.png"' style='opacity: 0.9;background-color: #909399;margin:0px 10px;' />	
										<view class="video-title u-line-1">{{ content.title }}</view>
									</view>
								</view> -->
								<view class="recommend-list">
									<view v-for="(content, index) in item.contents" :key="index" class="recommend-item" @click='toUrl(`/pages/content/video?id=${content.id}`)'>
										<view style='display: flex;justify-content: center;'>
											<image class="recommend-img" :src='content.video ? content.video : "/static/video.png"' mode="aspectFit" ></image>
										</view>
										<view class="recommend-info">
											<view class="recommend-name">{{ content.title }}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view v-else>
							<text class="u-collapse-content">该类目未有教程</text>
						</view>
					</u-collapse-item>

				</u-collapse>
			</view>
			<view v-else style='margin-top:20vh'>
				<u-empty mode="data" text='暂无教程'>
				</u-empty>
			</view>
		</view>
		<view v-else style='margin-top:20vh'>
			<u-empty mode="data" text='暂无教程'>
			</u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categories: '',
				category: 0,
				children: []
			}
		},
		onLoad() {
			this.request.get(`api/categories`, {
				'@filter': `entity.getType().getSlug() == 'video' && !entity.getParent()`,
				'@order': "entity.sequence|ASC"
			}).then((res) => {
				console.log(res.data)
				if (res.data && res.data.length > 0) {
					this.categories = res.data
					this.getContents(res.data[0].children)
				}
			})
		},
		methods: {
			chooseCategory(e) {
				console.log(e)
				this.getContents(e.children)
			},
			getContents(children) {
				uni.showLoading()
				let promise = []
				for (let i of children) {
					promise.push(
						this.request.get(`api/contents`, {
							'@filter': `entity.getCategory().getId() == ${i.id} && entity.getEnabled() == true`,
							// '@display': "['id','title']",
							'@order': 'entity.listOrder|ASC'
						}).then((res) => {
							i['contents'] = res.data
						})
					)
				}
				Promise.all(promise).then((res) => {
					this.children = children
					console.log(children)
					uni.hideLoading()
				})
			},
			toUrl(page) {
				uni.navigateTo({
					url: page
				})
			}
		}
	}
</script>

<style>
	.container {
		padding: 15px;
	}

/* 	.video-item {
		margin-bottom: 15px;
	}

	.video-preview {
		width: 100%;
		height: 180px;
		border-radius: 8px;
		background: #f5f5f5;
	}

	.video-title {
		margin-top: 8px;
		font-size: 14px;
		text-align: center;
		color: #333;
	} */
	
	.recommend-list {
		display: flex;
		flex-wrap: wrap;
	}
	
	.recommend-item {
		width: 48%;
		margin: 15px 1%;
		background: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		padding: 10px 0px;
	}
	
	.recommend-img {
		width: 288rpx;
		height: 512rpx;
		/* border-radius: 20rpx; */
	}
	
	.recommend-info {
		padding: 20rpx;
	}
	
	.recommend-name {
		font-size: 28rpx;
		color: #333;
	}
</style>